/*
  用法：
    <yl-popup show="{{ bottomShow }} "position="bottom" close-click-overlay="{{true}}" bind:clickOverlay="clickOverlay">
      <view class="box-view-bottom"> 1111 </view>
    </yl-popup>
  Props
    show          显示隐藏
    position      弹出方向，默认center    可选值：top bottom left right center
    overlay       是否显示遮罩层
    z-index       层级
    close-click-overlay   是否在点击遮罩层后关闭
  Events
    click-overlay  点击背景遮罩层触发
  Slot
    -             默认插槽，用于在遮罩层上方嵌入内容
  外部样式类
    custom-class    根节点样式类
    content-class   遮罩层上方嵌入内容的样式类
*/
Component({
  externalClasses: ["custom-class","content-class"],
  /**
   * 组件的属性列表
   */
  properties: {
    // 显示隐藏
    show: {
      type: Boolean,
      value: false,
      observer(value) {
        this.chnageAnimateName(value);
      },
    },
      /*
      弹出方向，默认center
      可选值：top bottom left right center
    */
      position: {
        type: String,
        value: "center",
      },
      // 是否显示遮罩层,默认true
      overlay: {
        type: Boolean,
        value: true,
      },
      // 层级
      zIndex: {
        type: Number,
        value: 100,
      },
      // 是否在点击遮罩层后关闭
      closeClickOverlay: {
        type: Boolean,
        value: true,
      },
      boxStyle: {
        type: String,
        value: ""
      }
    },

    /**
     * 组件的初始数据
     */
    data: {
      popTransName: "", //弹出层内容动画
      showdowTransName: "", //遮罩层动画
      showHide: false,
    },

    /**
     * 组件的方法列表
     */
    methods: {
      // 弹出、关闭动画
      chnageAnimateName(type) {
        let popTransName = "",
          showdowTransName = "";
        if (type) {
          popTransName = this.data.position + "-enter-animated";
          showdowTransName = "showdow-enter";
          this.setData({
            showHide: type,
          });
        } else {
          popTransName = this.data.position + "-leave-animated";
          showdowTransName = "showdow-leave";
          setTimeout(() => {
            this.setData({
              showHide: type,
            });
          }, 150);
        }

        this.setData({
          popTransName: popTransName,
          showdowTransName: showdowTransName,
        });
      },
      clickModal() {
        // 如果允许点击遮罩层关闭
        if (this.data.closeClickOverlay) {
          this.hidePop();
          // 关闭
          this.triggerEvent("click-overlay", this);
        }
      },
      // 关闭
      hidePop() {
        this.chnageAnimateName(false);
        setTimeout(() => {
          this.setData({
            showHide: false,
            show: false,
          });
        }, 150);
      },
    },
    test() {},
});
